<!DOCTYPE html>
<html>
<head>
    <title>微信小程序图标生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .icon-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
        .icon-item {
            text-align: center;
        }
        canvas {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        button {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        h1 {
            color: #2ecc71;
        }
        .instructions {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>微信小程序底部导航栏图标生成器</h1>
    
    <div class="instructions">
        <h3>使用说明：</h3>
        <p>1. 点击下方的"生成图标"按钮生成简单的图标</p>
        <p>2. 右键点击每个图标，选择"图片另存为..."保存图标</p>
        <p>3. 将图标保存到项目的 static/icon 目录下，确保文件名与pages.json中配置的一致</p>
        <p>4. 需要保存的图标文件名：home.png, home-active.png, publish.png, publish-active.png, my.png, my-active.png</p>
    </div>
    
    <button id="generateBtn">生成图标</button>
    
    <div class="icon-container" id="iconContainer"></div>
    
    <script>
        document.getElementById('generateBtn').addEventListener('click', generateIcons);
        
        function generateIcons() {
            const container = document.getElementById('iconContainer');
            container.innerHTML = '';
            
            const icons = [
                { name: 'home.png', color: '#999999', text: '首页' },
                { name: 'home-active.png', color: '#2ecc71', text: '首页' },
                { name: 'publish.png', color: '#999999', text: '登报' },
                { name: 'publish-active.png', color: '#2ecc71', text: '登报' },
                { name: 'my.png', color: '#999999', text: '我的' },
                { name: 'my-active.png', color: '#2ecc71', text: '我的' }
            ];
            
            icons.forEach(icon => {
                const div = document.createElement('div');
                div.className = 'icon-item';
                
                const canvas = document.createElement('canvas');
                canvas.width = 50;
                canvas.height = 50;
                
                const ctx = canvas.getContext('2d');
                
                // 清空画布
                ctx.fillStyle = 'transparent';
                ctx.fillRect(0, 0, 50, 50);
                
                // 绘制图标
                if (icon.name.includes('home')) {
                    drawHomeIcon(ctx, icon.color);
                } else if (icon.name.includes('publish')) {
                    drawPublishIcon(ctx, icon.color);
                } else if (icon.name.includes('my')) {
                    drawMyIcon(ctx, icon.color);
                }
                
                const label = document.createElement('div');
                label.textContent = icon.name;
                
                div.appendChild(canvas);
                div.appendChild(label);
                container.appendChild(div);
            });
        }
        
        function drawHomeIcon(ctx, color) {
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(10, 25);
            ctx.lineTo(25, 10);
            ctx.lineTo(40, 25);
            ctx.stroke();
            
            ctx.fillStyle = color;
            ctx.fillRect(15, 25, 20, 15);
            ctx.strokeRect(15, 25, 20, 15);
        }
        
        function drawPublishIcon(ctx, color) {
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            
            // 绘制纸张
            ctx.beginPath();
            ctx.rect(10, 10, 30, 35);
            ctx.stroke();
            
            // 绘制线条
            ctx.beginPath();
            ctx.moveTo(15, 20);
            ctx.lineTo(35, 20);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(15, 30);
            ctx.lineTo(35, 30);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(15, 40);
            ctx.lineTo(25, 40);
            ctx.stroke();
        }
        
        function drawMyIcon(ctx, color) {
            ctx.strokeStyle = color;
            ctx.fillStyle = color;
            ctx.lineWidth = 2;
            
            // 绘制头部
            ctx.beginPath();
            ctx.arc(25, 20, 10, 0, Math.PI * 2);
            ctx.stroke();
            
            // 绘制身体
            ctx.beginPath();
            ctx.moveTo(25, 30);
            ctx.lineTo(25, 40);
            ctx.stroke();
            
            // 绘制手臂
            ctx.beginPath();
            ctx.moveTo(15, 35);
            ctx.lineTo(35, 35);
            ctx.stroke();
        }
    </script>
</body>
</html> 